<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录注册 - 獭米英语单词本</title>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/account.css">
</head>
<body>
  <div class="main-content">
    <div class="account-container">
    <div class="account-header">
      <h1 class="account-title" id="account-title">登录账户</h1>
      <p class="account-subtitle">欢迎回到獭米英语单词本</p>
    </div>
    
    <!-- 登录表单 -->
    <form class="account-form active" id="login-form">
      <div class="form-group">
        <label class="form-label" for="login-account">账号</label>
        <input type="text" class="form-input" id="login-account" placeholder="请输入手机号或邮箱" required>
        <div class="form-error" id="login-account-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="login-password">密码</label>
        <div class="password-group">
          <input type="password" class="form-input" id="login-password" placeholder="请输入密码" required>
          <button type="button" class="password-toggle" data-target="login-password">👁️</button>
        </div>
        <div class="form-error" id="login-password-error"></div>
      </div>
      
      <div class="form-group">
        <label class="remember-login">
          <input type="checkbox" id="remember-login" class="remember-checkbox">
          <span class="remember-text">记住登录状态</span>
        </label>
      </div>
      
      <button type="submit" class="form-button" id="login-submit">
        登录
      </button>
      
      <div class="form-switch">
        没有账号？<a href="#" id="to-register">前往注册</a>
      </div>
    </form>
    
    <!-- 注册表单 -->
    <form class="account-form" id="register-form">
      <div class="form-group">
        <label class="form-label" for="register-account">账号</label>
        <input type="text" class="form-input" id="register-account" placeholder="请输入手机号或邮箱" required>
        <div class="form-error" id="register-account-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-nickname">昵称</label>
        <input type="text" class="form-input" id="register-nickname" placeholder="请输入昵称" required>
        <div class="form-error" id="register-nickname-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-password">密码</label>
        <div class="password-group">
          <input type="password" class="form-input" id="register-password" placeholder="请输入密码" required>
          <button type="button" class="password-toggle" data-target="register-password">👁️</button>
        </div>
        <div class="form-error" id="register-password-error"></div>
      </div>
      
      <div class="form-group">
        <label class="form-label" for="register-captcha">验证码</label>
        <div class="captcha-group">
          <input type="text" class="form-input captcha-input" id="register-captcha" placeholder="请输入验证码" required>
          <div class="captcha-display" id="captcha-display">ABCD</div>
        </div>
        <div class="form-error" id="register-captcha-error"></div>
      </div>
      
      <button type="submit" class="form-button" id="register-submit">
        注册
      </button>
      
      <div class="form-switch">
        已有账号？<a href="#" id="to-login">前往登录</a>
      </div>
    </form>
    </div>
  </div>

  <!-- 页脚将通过common.js动态生成 -->

  <script src="../js/common.js"></script>
  <script src="../js/plugins.js"></script>
  <script src="../js/account.js"></script>
</body>
</html>